import type { ComponentType, LazyExoticComponent } from "react";
import { Loading } from "@jiaminghi/data-view-react";
import React, { Suspense } from "react";

const Lazyload: React.FC<{ children: LazyExoticComponent<ComponentType<any>> }> = ({ children }) => {
  const fallback = (
    <div className="w-dvw h-dvh flex justify-center items-center bg-[#04060D]">
      <Loading style={{ color: "#FFFFFF" }}>Loading...</Loading>
    </div>
  );

  return <Suspense fallback={fallback}>{React.createElement(children)}</Suspense>;
};

export default Lazyload;
